<!-- <h3>{{ item.NickName }} <a ui-sref="^.edit({id: currentID})"><i class="glyphicon glyphicon-pencil"></i></a></h3> -->
<div id="content_header">
  <h3>Profile</h3>
</div>


<div id="sub_container" class="container-fluid" ui-view="sub" style="padding-left:0px;">
  <tabset>

    <tab heading="Personal Information">
      <div class="panel panel-primary">
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
              <h4 class="form-header">Personal Information <a ui-sref=".edit">Edit</a></h4>
              <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                  <img ng-src="{{ (item.ProfilePictureUrl) ? 'http://afas42.bali.ialf.edu/images/photo/'+item.ProfilePictureUrl : 'http://placehold.it/320x320' }}" class="img-responsive">
                </div>
                <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                  <dl>
                    <dt>Name</dt>
                    <dd>{{ item.FullName }} - {{ item.SID }}</dd>
                    <dt>Nickname</dt>
                    <dd>{{ item.NickName }}</dd>
                    <dt>Date of Birth</dt>
                    <dd>{{ item.DoB | date:'dd MMMM yyyy' }}</dd>
                    <dt>Sex</dt>
                    <dd>{{ Sexes[item.Sex].Label }}</dd>
                    <dt>Phone Number</dt>
                    <dd>{{ item.Phone }}</dd>
                    <dt>Occupation</dt>
                    <dd>{{ item.Occupation.Name }}</dd>
                  </dl>
                </div>
              </div>

            </div>
            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
              <h4 class="form-header">Contact Information</h4>

              <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-10 col-lg-8">
                  <dl ng-repeat="contact in item.Contacts" class="dl-bordered">
                    <dt>{{ contact.ContactType.Name }}</dt>
                    <dd class="text-muted" ng-show="contact.Address"><i class="simple-icon-pointer"></i>&nbsp;&nbsp;&nbsp;{{ contact.Address }}, {{ contact.City.Name }}, {{ contact.PostalCode }}</dd>
                    <dd class="text-muted" ng-show="contact.Email"><i class="simple-icon-envelope-open"></i>&nbsp;&nbsp;&nbsp;{{ contact.Email }}</dd>
                    <dd class="text-muted" ng-show="contact.Phone"><i class="simple-icon-call-end"></i>&nbsp;&nbsp;&nbsp;{{ contact.Phone }}</dd>
                    <dd class="text-muted" ng-show="contact.Fax"><i class="simple-icon-envelope-letter"></i>&nbsp;&nbsp;&nbsp;{{ contact.Fax }}</dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </tab>

    <tab heading="Enrollments">
      <div class="panel panel-primary">
        <div class="panel-body">
          <div class="row">
            <table class="table table-striped table-hover">
              <thead>
                <tr>
                  <th>Course</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="courseschedule in item.Enrollments">
                  <td>
                    <span class="dropdown">
                      <a href class="dropdown-toggle">
                        {{ courseschedule.CourseSchedule.CourseName }}
                      </a>
                      <ul class="dropdown-menu">
                        <li role="presentation" class="dropdown-header">Action</li>
                        <li><a href ui-sref="courseSchedules.info({ id: courseschedule.Id })">Info</a></li>
                      </ul>
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </tab>

    <tab heading="Placement Tests">
      <div class="panel panel-primary">
        <div class="panel-body">
          <div class="row">
            <table class="table table-striped table-hover">
              <thead>
                <tr>
                  <th>Schedule</th>
                  <th>Payment Status</th>
                  <th>Result</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="item in item.PlacementTests">
                  <td>On <small class="text-muted">{{ item.DateTime  | date: 'medium' }}</small></td>
                  <td>
                    <span class="label label-success" ng-if="item.Invoice.InvoiceStatus === 1">Paid</span>
                    <span class="label label-danger" ng-if="item.Invoice.InvoiceStatus !== 1">Pending</span>
                  </td>
                  <td>
                    <span class="label label-success" ng-if="item.CourseLevel">Passed</span>
                    <span class="label label-warning" ng-if="!item.CourseLevel">Ongoing</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </tab>

    <!-- <tab heading="Make Up Tests">
      <div class="panel panel-primary">
        <div class="panel-body">
          <div class="row">
            <table class="table table-striped table-hover">
              <thead>
                <tr>
                  <th>Schedule</th>
                  <th>Payment Status</th>
                  <th>Result</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="item in item.PlacementTests">
                  <td>On <small class="text-muted">{{ item.DateTime  | date: 'medium' }}</small></td>
                  <td>
                    <span class="label label-success" ng-if="item.Invoice.InvoiceStatus === 1">Paid</span>
                    <span class="label label-danger" ng-if="item.Invoice.InvoiceStatus !== 1">Pending</span>
                  </td>
                  <td>
                    <span class="label label-success" ng-if="item.CourseLevel">Passed</span>
                    <span class="label label-warning" ng-if="!item.CourseLevel">Ongoing</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </tab> -->

    <!-- <tab heading="Payments">
      <div class="panel panel-primary">
        <div class="panel-body">
          <div class="row">

          </div>
        </div>
      </div>
    </tab> -->
    <tab heading="History">
      <div class="panel panel-primary">
        <div class="panel-body">
          <div class="row">
            <table class="table table-striped table-hover">
              <thead>
                <tr>
                  <th>Message</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="item in item.StudentLogs">
                  <td>{{ item.Message }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </tab>

  </tabset>
</div>